<template>
	<view class="container">
		<!-- <u-navbar leftIconSize="46rpx" :title="isOpenModel ? '青少年模式已开启' : '青少年模式未开启'" fixed placeholder>
			<view slot="left">
				<view v-if="!isOpenModel" class="nav-left-btn" @click="handleUseBack">
					<u-icon name="arrow-left" color="#303030" size="24"></u-icon>
				</view>
			</view>
		</u-navbar> -->
		<view class="model-desc">
			<view class="row">青少年模式下，{{AppName}}所有功能无法正常使用，需输入密码关闭青少年模式，才能继续使用{{AppName}}。</view>
			<view class="row">
				{{AppName}}是一个达人技能交易平台，禁止未满18周岁的未成年人注册使用，{{isOpenModel ? "若您是未成年人，请主动退出应用，感谢您的配合！" : "请监护人主动选择，并设置监护密码"}}
			</view>
		</view>
		<view class="open-model" @click="openModel">{{isOpenModel ? '关闭青少年模式' : '开启青少年模式'}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpenModel: false,
				AppName: "海豚圈圈"
			};
		},
		onLoad() {},
		onShow() {
			this.isOpenModel = getApp().hasOpneAdolescentModel()
			setTimeout(() => {
				uni.setNavigationBarTitle({
					title: this.isOpenModel ? "青少年模式已开启" : "青少年模式未开启"
				})
			}, 500)
		},
		methods: {
			handleUseBack() {
				this.toBack()
			},
			openModel() {
				uni.navigateTo({
					url: "/minePages/adolescentModel/stepOne"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		flex-direction: column;
		display: flex;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #f8f8f8;

		.model-desc {
			flex: 1;
			padding-top: 10%;

			.row {
				padding: 0 40rpx;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 20rpx;
				text-align: justify;
			}
		}

		.open-model {
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #ffffff;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			margin: 0 auto 50rpx auto;
		}
	}
</style>